<template>
  <div class="home">
    <caption>
      OpenXML
    </caption>
    <p>
      由Microsoft开发,
      是一种基于XML的Office文档格式，是.docx、.xlsx和.pptx的默认格式，
      而二进制格式文档已被弃用（.doc、xls和.ppt）。
    </p>
    <p>
      2006年被ECMA
      International采用为ECMA-376，第二个版本于2008年12月发布，第三个版本于2011年6月发布。
      本规范已被ISO和IEC采用为ISO/IEC 29500。
    </p>
    <VueFlowy :chart="chart"></VueFlowy>
  </div>
</template>
<script>
import { VueFlowy, FlowChart } from "vue-flowy";

export default {
  name: "App",

  components: {
    VueFlowy,
  },

  data: () => ({
    chart: new FlowChart(),
    elements: [],
  }),

  mounted() {
    const docx = this.chart.addElement("docx/xlsx/pptx");
    const zip = this.chart.addElement("zip", { label: "zip" });
    const xml = this.chart.addElement("xml", { label: "xml" });
    const res = this.chart.addElement("res", { label: "res" });
    const png = this.chart.addElement("png", { label: "logo" });
    const txt = this.chart.addElement("txt", { label: "confidential" });
    docx.leadsTo(zip).leadsTo(xml).leadsTo(txt);
    zip.leadsTo(res).leadsTo(png);

    this.elements.push(docx);
    this.elements.push(zip);
    this.elements.push(xml);
    this.elements.push(res);
    this.elements.push(png);
    this.elements.push(txt);

    zip.on("click", function () {
      console.log("click!");
    });
  },
  beforeDestroy() {
    this.elements.forEach((it) => it.unregister());
  },
};
</script>
<style scoped>
.home {
  text-align: left;
  font-size: small;
}
</style>